<template>
  <view style=" background-color: #f3f3f3">
    
      
    
    <view style="position: fixed;
	z-index: 99;
	top:0;
	width: 100%;">
      <view class="uni-list-cells" style="align-items: flex-start;">
          <view class="topTitleVs unitV" >{{message.claName}}</view>
      <!--    <view class="list-paixu">
            <view class="topTitleV">{{message .startTime}} 一 {{message.endTime}} </view>
          </view> -->
  <u-cell-item :title="'关联课程：'+message.coursename"    icon="order"   :titleStyle="{fontSize : '22rpx'}"  :arrow="false" :border-bottom="false" icon-size =25 style="right: 30rpx;height: 15rpx;color: black;" hover-class = "none"   :iconStyle="{color:  'black'}"></u-cell-item>
  <u-cell-item :title="'班级老师：'+message.name"    icon="server-man"   :titleStyle="{fontSize : '22rpx'}"  :arrow="false" :border-bottom="false" icon-size =25 style="right: 30rpx;height: 3rpx;color: black;bottom: 10rpx;"  hover-class = "none"   :iconStyle="{color:  'black'}"></u-cell-item>
  <u-cell-item :title="'人数/容量：'+message.capacity"    icon="account"    :titleStyle="{fontSize : '22rpx'}"  :arrow="false" :border-bottom="false" icon-size =25 style="right: 30rpx;height: 3rpx;color: black;bottom: 20rpx;"   hover-class = "none" :iconStyle="{color:  'black'}"></u-cell-item>
  <u-cell-item :title="'开班日期：'+message.openDate"    icon="calendar"    :titleStyle="{fontSize : '22rpx'}"  :arrow="false" :border-bottom="false" icon-size =25 style="right: 30rpx;height: 3rpx;color: black;bottom: 30rpx;"   hover-class = "none" :iconStyle="{color:  'black'}"></u-cell-item>
   <u-cell-item :title="'结班日期：'+message.closeDate"    icon="calendar"    :titleStyle="{fontSize : '22rpx'}"  :arrow="false" :border-bottom="false" icon-size =25 style="right: 30rpx;height: 3rpx;color: black;bottom: 40rpx;"   hover-class = "none"  :iconStyle="{color:  'black'}"></u-cell-item>
<!-- 
          <view
            style="display: flex; flex: 1; ; margin-top: 0px; margin-left: -8px; height: 38px; width:calc(100vw-62px)"> -->

            <!--      <view class="cellView" :style="{ color: bindColor(index), backgroundColor: bindBgColor(index) }">
          {{message.roomName}}{{message.roomId}}
        </view> -->
          <!-- </view>     -->





      </view>
      
      
      
      
      
      
      
      
   
  <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" bar-width="150" style="height: 80rpx;"></u-tabs>
  </view>
  
  
<view v-show = "current == 0" style="margin-top: 100rpx;">
  
  
   <red-empty img="record" bg="#f6f7f8" text="暂无记录" imgSize="600rpx" height="70vh" style="margin-top: 380rpx;" v-if="ruleList.length == 0" />
<u-card v-if="ruleList.length != 0"  v-for="(item,index) in ruleList" :key="index" padding="15"   borderWidth = 0 bottomArrange= 15  thumb="/static/iconfont/rules.png" :border="false" :title=message.coursename  :full="true" >
   <view class="" slot="body">
    <view>
  		<view class="u-body-item u-flex  u-p-t-0">
  			<view class="u-body-item-title u-line-2" style="color: black;font-weight: bold;" >上课教室</view>
  		</view>
      <view class="u-body-item u-flex  u-col-between u-p-t-0" style="margin-bottom: 15rpx;">
      	<view class="u-body-item-title u-line-2">{{item.roomName}}{{item.roomId}}</view>
      </view>
      
      <view class="u-body-item u-flex   u-p-t-0" style="color: black;font-weight: 1000;">
      	<view class="u-body-item-title u-line-2">排课日期</view>
      </view>
      <view class="u-body-item u-flex  u-col-between u-p-t-0" style="margin-bottom: 15rpx;">
      	<view style="color:#aaaaaa;">{{item.beginDate}} ~ {{item.endDate}}</view>
      </view>
      
      </view>
      <view slot="foot">
    					  <view style="color: #4094ff; font-weight: bolder; text-align: center; display: flex;flex-direction: row;justify-content: space-between;">
    <text >{{ colDate(item.weekDay) }}</text>
    <text style="margin-right: 35rpx;">{{ item.startTime }} - {{ item.endTime }}</text>
  </view>
        </view>
  	</view>
  
  </u-card>
  </view>
 
 <view v-show="current == 1" style="margin-top: 440rpx;height: 67vh;">
     <red-empty img="record" bg="#f6f7f8" text="暂无记录" imgSize="600rpx" height="70vh" style="margin-top: 380rpx;" v-if="studentList.length == 0" />
 <uni-list v-if="studentList.length != 0">
    <uni-list-item   v-for="(item, index) in studentList" :key="index" :title="item.studentname" showArrow clickable 
        :thumb="imageurl(item.avater)"  :avatar-circle="true" @click="navto(item)"
        thumb-size="lg"  >
        </uni-list-item>
    
  </uni-list>
  </view>
 
  <view v-show="current == 2" style="margin-top: 430rpx;height: 67.5vh;"  >
   <view>
              <zzx-calendar style="position: fixed; z-index: 99; width: 100%;background-color: white;" :showBack="true" @selected-change="datechange" ></zzx-calendar>
    </view>

           <red-empty img="record" bg="#f6f7f8" text="暂无记录" imgSize="600rpx" height="70vh" style="margin-top: 380rpx;" v-if="courseList.length == 0" />
           <u-gap height="25" bg-color="#f5f5f5" ></u-gap>
           <view v-if="courseList.length != 0"  style="margin-top: 180rpx;"   >
             <cc-listView :productList="courseList"></cc-listView>


            </view>
   </view>

  











  </view>
</template>

<script>
  import moment from 'moment';
  moment.locale('zh-cn');
  export default {
    data() {
      return {
        chineseNumbers: ['一', '二', '三', '四', '五','六','日'],
        show : false,
        message: '',
        studentClassList: '',
        current: 0,
        studentList:[],
        ruleList:[],
        courseList : [],
        item: '',
        list: [{
          name: '排课信息'
        }, {
          name: '班级学员',
        },{
          name: '点名情况',
        }],
      }
    },






    methods: {
      datechange(e) {
        this.$u.api.searchListForClaId({
          claId:  this.message.claId,
          claDate: e.fulldate
        }).then(response => {
          
          if (response.code == 200) {
            if (response.data == '') {
              // this.current = 0
               this.courseList = []
            } else {
              this.courseList = response.data
              // this.current = 1
            }
          } else {
            uni.showToast({
              title: '服务器出错',
              icon: 'error'
            })
      
      
          }
        })
      },
      
      imageurl(avater){
        
        if(avater == ""){
          return require('@/static/common/img/people0' + '.png')
        }
        return this.vuex_config.imgUrl+'/dev-api'+avater
        
      },
      


      navto(item){
        uni.navigateTo({
          url: '/pages/sys/student/student_detail?data='+JSON.stringify(item)
        })
        
      },
colDate(item){
   const weekdaysArr = item.split(',');
   let result = '';
         for (let i = 0; i < weekdaysArr.length; i++) {
           result += this.chineseNumbers[weekdaysArr[i] - 1];
           if (i < weekdaysArr.length - 1) {
             result += ' 、';
           }
         }
  
  
  return '每周'+result
},
      formatDate(dateStr) {
        const da = moment(dateStr);
        const formatted = da.format('YYYY年MM月DD日');
        const dayOfWeek = da.format('dddd');
        return `${formatted} ${dayOfWeek}`;
      },





    change(index) {
      
      this.current = index;
    },

      },


      onLoad(options) {
        // 获取当前日期
        var currentDate = new Date();
        // 格式化日期
        var year = currentDate.getFullYear();
        var month = ('0' + (currentDate.getMonth() + 1)).slice(-2); // 月份从 0 开始，所以要加 1
        var day = ('0' + currentDate.getDate()).slice(-2);
        var today = year + '-' + month + '-' + day;
      
      // 解析传递的对象
        this.message = options.data;

        this.$u.api.ClaRulelist({
          claId: this.message.claId,
        
        }).then(res => {
          
          if (res.code == 200) {
           this.ruleList  =  res.data
            
                            
          } else {
        
            uni.showToast({
              title: '服务器出错',
              icon: 'error'
            })
          }
     
        })
        
        
        
        this.$u.api.searchListForClaId({
          claId:  this.message.claId,
          claDate: '2024-03-02'
        }).then(response => {
          if (response.code == 200) {
            if (response.data == '') {
              this.courseList = []
              // this.current = 0
            } else {
              this.courseList = response.data
              // this.current = 1
            }
          } else {
            uni.showToast({
              title: '服务器出错',
              icon: 'error'
            })
              
               
          }
        })
        

       
       
         this.$u.api.ScStudentlistAPP(
        {
         claid: this.message.claId,
         
        }
       ).then(res => {
         if (res.code == 200) {
           this.studentList=  res.data
                           
         } else {
       
           uni.showToast({
             title: '服务器出错',
             icon: 'error'
           })
         }
         
         
       
       
       
       
       })


    },


  }
</script>

<style lang="scss"   scoped>
   @import '../../../common/uni.css';
 
  .background {
    background-color: #f7f7f7;
    width: 100vw;
    // min-height: calc(100vh - 100rpx);
    /* #ifdef H5 */
    min-height: 70vh;
    /* #endif */
    /* #ifndef H5 */
    min-height: 100vh;
    /* #endif */
    padding-top: 1rpx;

    .filter {
      background: #fff;
      padding: 30rpx;
      width: 100vw;
      overflow-x: scroll;

      .filter-item {
        min-width: 200rpx;
        height: 80rpx;
        background: #F4F6F9;
        border-radius: 20px;
        background: #F4F6F9;
        background-size: 39rpx 30rpx;
        margin-right: 20rpx;

        font-size: 32rpx;
        color: #7F8BB4;
        font-weight: 400;

        image {
          width: 33rpx;
        }
      }
    }
  }



  .texts {
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
    margin: 6rpx 0 22rpx 0;

  }

  .uni-list-cells {
    background-image: url('/static/iconfont/blue.png'); 
    width: 100%;
    height: 360rpx;
    flex-direction: column;
    background-size: 120% 280%;
    /* 或者使用 cover、100% 100% 等值 */
    background-position: center;
    padding: 65rpx 30rpx; 
  }

  .inner {
    position: relative;
    top: 5.8%;
  }



  .topTitleVs {
    height: 40rpx;
    line-height: 40rpx;
    color: #2a2a2a;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    font-size: 50rpx;

  }


  .unitV {
    color: #000000;
    font-size: 40rpx;
    margin-top: 10rpx;
    margin-bottom: 10rpx;
    font-family: PingFangSC-Regular, PingFang SC;

  }



  .task {
    width: 100%;
    height: 445rpx;
    background: #FFFFFF;
    border-radius: 20rpx;
    margin-top: 24rpx;
    padding: 40rpx 30rpx 0 20rpx;
    display: flex;
    flex-direction: column;

    .title {
      font-size: 32rpx;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      color: #333333;
      line-height: 44rpx;
    }

    .text {
      font-size: 24rpx;
      color: #999999;
      line-height: 34rpx;
      margin: 6rpx 0 22rpx 0;
    }

    .list {
      display: flex;
      justify-content: space-between;
      margin-bottom: 74rpx;

      >view {
        width: 92rpx;
        height: 116rpx;
        background: linear-gradient(90deg, #A47EFF 0%, #8F64FB 100%);
        border-radius: 6rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        >image {
          width: 58rpx;
          height: 56rpx;
        }

        >text {
          font-size: 20rpx;
          color: #FFFFFF;
          line-height: 28rpx;
          margin-top: 6rpx;
        }
      }
    }

    .invitation {
      .item {
        display: flex;
        align-items: center;
        margin-bottom: 25rpx;

        .icon {
          width: 84rpx;
          height: 84rpx;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 14rpx;

          >image {
            width: 84rpx;
            height: 84rpx;
          }
        }

        .cent {
          flex: 1;
          display: flex;
          flex-direction: column;

          >text:first-child {
            font-size: 28rpx;
            color: #333333;
            line-height: 40rpx;
          }

          >text:last-child {
            font-size: 24rpx;
            color: #999999;
            line-height: 34rpx;
          }
        }

        .complete {
          width: 100rpx;
          height: 50rpx;
          border-radius: 2rpx;
          justify-content: center;
          align-items: center;
          text-align: center;

          border: 0.5rpx solid #e6e6e6;


          >text {
            font-size: 24rpx;
            font-weight: 600;
            line-height: 50rpx;
          }
        }

        .completes {
          width: 100rpx;
          height: 50rpx;
          border-radius: 2rpx;
          justify-content: center;
          align-items: center;
          text-align: center;
          border: 0.5rpx solid #e6e6e6;
          color: #ffffff;
          line-height: 30upx;
          font-size: 20upx;
          top: 15upx;
          border-radius: 15upx;
          background-color: #FF6633;

          >text {
            font-size: 21rpx;
            line-height: 50rpx;
          }
        }
      }
    }
  }

  
  .inner {
    position: relative;
    top: 5.8%;
  }
  

  
  .topTitleV {
    height: 40rpx;
    line-height: 40rpx;
    color: #333333;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 500;
    font-size: 35rpx;
  
  }
  

  
 
  
  .cellView {
    margin-top: 8px;
    margin-left: 8px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 2px;
    padding: 0px 4px !important;
    font-size: 12px;
  
    color: #4272FF;
    background: #F3F4F6;
  }
</style>